<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeCard from './knowledge-card.vue'
import { patientHomeKnowledge } from '@/api/home'
import type { patientHomeKnowledgeItem, patientHomeKnowledgeType } from '@/types/home'
const props = defineProps<{
  type: patientHomeKnowledgeType
}>()
const list = ref<patientHomeKnowledgeItem[]>([])
const getData = async () => {
  const res = await patientHomeKnowledge({
    current: current,
    pageSize: 10,
    /**
     * recommend推荐，fatReduction减脂，food健康饮食like关注医生页面文章
     */
    type: props.type
  })
  /*
   1:数据要累加
   2:v-model:loading的值改成false
   3:修改下一页请求条件
   4：判断是否加载完成，如果完成  finished的值改成true
*/

  list.value.push(...res.data.rows)
  loading.value = false
  current++
  if (list.value.length >= res.data.total) {
    finished.value = true
  }

  // console.log('列表数据', res)
}
// getData()

// 上拉加载
const loading = ref(false)
const finished = ref(false)
let current = 1
</script>

<template>
  <div class="knowledge-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <knowledge-card v-for="i in list" :key="i.id" :item="i"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
